{% load static bulma_tags %}
{% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}{% endblock title %}</title>
  {% block html_head_stuff %}
    {% font_awesome %}
    <link rel="stylesheet" href="{% static 'bulma/css/style.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
    <link rel="icon" type="image/png" href="/static/images/favicons/favicon.png" />
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        // Get all "navbar-burger" elements
        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

        // Check if there are any navbar burgers
        if ($navbarBurgers.length > 0) {

          // Add a click event on each of them
          $navbarBurgers.forEach( el => {
            el.addEventListener('click', () => {
              // Get the target from the "data-target" attribute
              const target = el.dataset.target;
              const $target = document.getElementById(target);
              // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
              el.classList.toggle('is-active');
              $target.classList.toggle('is-active');

            });
          });
        }

      });
    </script>

    {% block extra_html_head_stuff %}{% endblock extra_html_head_stuff %}
  {% endblock html_head_stuff %}
</head>
<body>

{% block header %}
  <div class="container">
    <nav class="navbar">
      <div class="navbar-brand">
        <a class="navbar-item" href="/">
          <img src="/static/images/katago.png" width="110" height="50">
        </a>

        <div class="navbar-burger burger" data-target="navMenuExample">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <div id="navMenuExample" class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item is-active" href="{% url 'current_run_networks' %}">
            {% trans "Networks" %}
          </a>
          <a class="navbar-item is-active" href="{% url 'current_run_game_network_groups' %}">
            {% trans "Games" %}
          </a>
          <a class="navbar-item is-active" href="{% url 'overall_contributions' %}">
            {% trans "Contributions" %}
          </a>
        </div>

        <div class="navbar-end">
          <a class="navbar-item is-active" href="https://github.com/lightvector/KataGo/releases">
            {% trans "Releases" %}
          </a>
          <a class="navbar-item is-active" href="https://github.com/lightvector/KataGo">
            {% trans "GitHub (KataGo)" %}
          </a>
          <a class="navbar-item is-active" href="https://github.com/katago/katago-server">
            {% trans "GitHub (Webserver)" %}
          </a>

        {% if user.is_authenticated %}
          {% url 'account_page' as account_url %}
          {% if account_url %}
            <a class="navbar-item is-hidden-desktop-only" href="{{ account_url }}">
              {% trans "Account" %}
            </a>
          {% endif %}
          {% url 'account_logout' as logout_url %}
          {% if logout_url %}
            <a class="navbar-item is-hidden-desktop-only" href="{{ logout_url }}">
              {% trans "Log Out" %} ({{user.username}})
            </a>
          {% endif %}
        {% else %}
          {% url 'account_login' as login_url %}
          {% if login_url %}
            <a class="navbar-item is-hidden-desktop-only" href="{{ login_url }}">
              {% trans "Log In" %}
            </a>
          {% endif %}
          {% url 'account_signup' as signup_url %}
          {% if signup_url %}
            <a class="navbar-item is-hidden-desktop-only" href="{{ signup_url }}">
              {% trans "Sign Up" %}
           </a>
          {% endif %}
        {% endif %}
        </div>
      </div>
    </nav>
  </div>
{% endblock header %}

{% block hero %}{% endblock hero %}

<section class="section">
  <div class="container">
    {% block messages %}
      {% if messages %}
        <div class="messages columns is-desktop">
          <div class="column is-4 is-offset-4">
            {% for message in messages %}
              <div class="message {% if message.tags %}is-{{ message.tags| bulma_message_tag }}{% endif %}">
                <div class="message-body">{{ message }}</div>
              </div>
            {% endfor %}
          </div>
        </div>
      {% endif %}
    {% endblock messages %}

    {% block content_area %}
      {% block content_title %}{% endblock content_title %}
      {% block content %}{% endblock content %}
    {% endblock content_area %}
  </div>
</section>

{% block modal %}{% endblock modal %}

{% block footer %}
  <footer class="footer">
    <div class="container">
      <div class="content has-text-centered">
        <p>
          {% blocktrans %}
          <strong><a href="https://github.com/lightvector/KataGo">Katago engine <i class="fab fa-github"></i></a></strong> by <a href="https://github.com/lightvector">lightvector</a>
          (<a href="https://github.com/lightvector/KataGo/blob/master/LICENSE">engine license</a>).
          <strong><a href="https://github.com/katago/katago-server">Katago server <i class="fab fa-github"></i></a></strong> by <a href="https://github.com/lightvector">lightvector</a> and <a href="https://github.com/tychota">tychota</a>
          (<a href="http://opensource.org/licenses/mit-license.php">server code license</a>).
          {% endblocktrans %}
          {% if settings.SHOW_FOOTER_ACKNOWLEDGEMENT %}
          <br/>
          {% blocktrans %}
          Additional thanks to <a href="https://www.janestreet.com/">Jane Street</a> for supporting KataGo's earlier runs, and to <a href="https://gogodonline.co.uk/">GoGoD</a> and <a href="http://go4go.net/go/">Go4Go</a> for pro games for improving training.
          {% endblocktrans %}
          {% endif %}
        </p>
      </div>
    </div>
  </footer>
{% endblock footer %}

{% block javascript %}
  {% block extra_javascript %}{% endblock extra_javascript %}
{% endblock javascript %}
</body>
</html>
